<template>
	<view class="index-box">
		<view class="bottom-box" ref="wenjie">
			<view class="isbn" @click="getIsbn">
				输入69码
			</view>
			<view class="code" @click="getCode">
				扫描条形码
			</view>
		</view>
		
		<uni-popup ref="isbnpopu" type="center" backgroundColor="#fff">
			<view class="isbnpopu-box">
				<view class="title">请输入69编码</view>
				<view class="sub-title">请输入不含"-"符号的69编码</view>
				<view class="example">69编码: 6900000000001</view>
				<image class="img" src="../../static/img/isbn.png" mode="widthFix"></image>
				<view class="isbn-input">
					<input type="text" class="input" v-model="isbn" placeholder="请输入69编号" />
				</view>
				<view class="btn-box">
					<view class="btn cancel" @click="cancelPopu">取消</view>
					<view class="btn confirm" @click="dialogInputConfirm">确认</view>
				</view>
			</view>
			
		</uni-popup>
	</view>
</template>

<script setup>
	import { getCurrentInstance,ref } from "vue"
	import {
	    onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import { showErrMsg } from "./../../utils/msg.js"
	import { useUserStore } from "./../../store/index.js"
	import {
			Html5Qrcode,
		} from 'html5-qrcode';

	const userStore = useUserStore();
	
	const { proxy } = getCurrentInstance();
	const code = ref('');
	
	const delIsbn = () => {
		code.value = ''
	}

	const getIsbn = () => {
		proxy.$refs['isbnpopu'].open();
	}
	
	const cancelPopu = () => {
		proxy.$refs['isbnpopu'].close();
	}
	
	const getCode = () => {
		Html5Qrcode.getCameras().then((devices) => {
			console.log(devices)
			if (devices && devices.length) {
				const html5QrCode = new Html5Qrcode('reader');
				html5QrCode.start({
						facingMode: 'environment'
					}, {
						fps: 10, // 设置每秒多少帧
						qrbox: {
							width: 300,
							height: 300
						}, // 设置取景范围
					},
					(decodedText) => {
						showErrMsg(decodedText);
						code.value = decodedText;
					},
				)
				.catch((err) => {
					console.log(err)
					showErrMsg('扫描失败!');
				});

			}
		})
		.catch((err) => {
			console.log(err)
			showErrMsg(err+'ERROR: 您需要授予相机访问权限!');
		});
		
	}


	const dialogInputConfirm = async (val) => {
		console.log(val)
	}
	
	onShow(()=>{
	})
	
	onLoad((detail)=>{ 
	})
</script>

<style lang="scss">
	.index-box {
		width: 100%;
		height: 100%;
		padding: 20rpx 20rpx 140rpx 20rpx;
		box-sizing: border-box;
		background-repeat: no-repeat;
		background-size: 100%;
		
		.bottom-box{
			width: 100%;
			height: 120rpx;
			padding: 0 40rpx;
			box-sizing: border-box;
			@include flex(row,space-between,center);
			background-color: #fff;
			position: absolute;
			left:0;
			right:0;
			bottom: 0;
			.isbn,.code{
				height: 80rpx;
				width: 300rpx;
				box-sizing: border-box;
				@include flex();
			}
			
			.isbn{
				border: 1px solid var(--mainColor);
				border-radius: 200rpx;
				color: var(--mainColor);
			}
			
			.code{
				color: #fff;
				background-color: var(--mainColor);
				border-radius: 200rpx;
			}
		}
		
		.uni-popup__wrapper{
			background-color: transparent!important;
		}
		.isbnpopu-box{
			padding-top: 30rpx;
			width: 670rpx;
			border-radius: 30rpx;
			background-color: #fff;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			.title{
				font-size: 32rpx;
				font-weight: 600;
				margin-bottom: 10rpx;
			}
			.sub-title{
				font-size: 24rpx;
				color: var(--borderColor);
				margin-bottom: 50rpx;
				color: #999999;
			}
			.example{
				font-size: 22rpx;
				margin-bottom: 30rpx;
			}
			.img{
				width: 230rpx;
				margin-bottom: 20rpx;
			}
			.isbn-input{
				width: 100%;
				padding: 30rpx;
				box-sizing: border-box;
				
				.input{
					width: 100%;
					height: 100rpx;
					padding: 0 20rpx;
					box-sizing: border-box;
					background-color: #f7f7f9;
					border-radius: 20rpx;
					color: #999999;
					font-size: 28rpx;
				}
			}
			.btn-box{
				width: 100%;
				display: flex;
				align-items: center;
				border-top: 1px solid var(--borderColor);
				.btn{
					width: 50%;
					height: 90rpx;
					box-sizing: border-box;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 30rpx;
				}
				.cancel{
					border-right: 1px solid var(--borderColor);
				}
				.confirm{
					color: var(--successColor);
				}
			}
		}
		
	}
</style>
